<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      title="用户消息列表"
      :indent="20"
      :columns="columns"
      :search-columns="searchColumns"
      :request-api="getTableList"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button
          v-auth="'sys.message.del.btn'"
          type="danger"
          :icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除消息
        </el-button>
      </template>
      <template #operation="{ row }">
        <el-button v-auth="'sys.message.del.btn'" type="primary" link :icon="View" @click="handleSet(row)"> 阅读 </el-button>
        <el-button
          v-if="row.type !== 1013001 && row.path"
          v-auth="'sys.message.del.btn'"
          type="primary"
          link
          :icon="Link"
          @click="handleSet(row)"
        >
          跳转页面
        </el-button>
      </template>
    </ProTable>
    <el-dialog v-model="dialogVisible" title="消息查看" width="50%" top="50px">
      <div class="view" v-html="contentVal"></div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { View, Link, Delete } from '@element-plus/icons-vue';
import ProTable from '@/components/ProTable/index.vue';
import { useHandleData } from '@/hooks/useHandleData';
import { getUserMsgList, readMsg, deleteUserMessage } from '@/api/modules/system/sysMessage';
import type { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface';
import { ref, computed } from 'vue';
import { useOptionsStore } from '@/stores/modules/options';
import { useMessageStore } from '@/stores/modules/sysMsg';
const msgStore = useMessageStore();
defineOptions({
  name: 'Message'
});
const dialogVisible = ref(false);
const optionsStore = useOptionsStore();
const content = ref('');
// 表格配置项
const columns = [
  { type: 'selection', width: 80, selectable: row => row.isLock !== 'T' },
  { prop: 'title', label: '标题' },
  {
    prop: 'type',
    label: '公告类型',
    tag: true,
    enum: optionsStore.getDictOptions('sys_message'),
    fieldNames: { label: 'codeName', value: 'id', tagType: 'callbackShowStyle' }
  },
  { prop: 'content', label: '内容' },
  {
    prop: 'status',
    label: '状态',
    tag: true,
    enum: optionsStore.getDictOptions('message_is_read'),
    fieldNames: { label: 'codeName', value: 'id', tagType: 'callbackShowStyle' }
  },
  { prop: 'path', label: '链接' },
  { prop: 'sendAt', label: '发送时间' },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
];
// 表格配置项
const searchColumns: SearchProps[] = [
  { prop: 'title', label: '标题名称', el: 'input' },
  {
    prop: 'type',
    label: '公告类型',
    el: 'select',
    enum: optionsStore.getDictOptions('sys_message'),
    fieldNames: { label: 'codeName', value: 'id' }
  }
];

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref<ProTableInstance>();
// 获取table列表
const getTableList = (params: any) => getUserMsgList(params);

const handleSet = async row => {
  content.value = row.content;
  dialogVisible.value = true;
  if (row.status != 1014001) {
    await readMsg([{ id: row.id, type: row.type, status: 1014001 }]);
    await msgStore.setMsgData();
    proTableRef.value?.getTableList();
  }
};

const contentVal = computed(() => content.value);

// 批量删除信息
const batchDelete = async ids => {
  await useHandleData(deleteUserMessage, { ids }, '删除所选消息');
  proTableRef.value?.clearSelection();
  proTableRef.value?.getTableList();
  await msgStore.setMsgData();
};
</script>
